<!--
 * @Author: xlm
 * @Date: 2021-07-30 15:21:51
 * @LastEditors: xlm
 * @LastEditTime: 2021-08-11 16:41:24
 * @Description: 交易密码设置与修改
-->
<template>
  <base-page-view class="container">
    <view style="height: 20rpx"></view>
    <view class="top" v-if="status == 0">
      <view class="item" :class="{ focus: Focus1 }">
        <view class="desc">交易密码</view>
        <input
          type="password"
          maxlength="6"
          @focus="Focus1 = true"
          @blur="Focus1 = false"
          class="input input-password"
          placeholder="请输入6位数字密码"
          placeholder-class="input-placeholder"
          v-model="formData.password"
          @input="inputPassword('password', $event)"
        />
      </view>
      <view class="item" :class="{ focus: Focus2 }">
        <view class="desc">确认密码</view>
        <input
          type="password"
          @focus="Focus2 = true"
          @blur="Focus2 = false"
          maxlength="6"
          class="input input-password"
          placeholder="再次输入6位数字密码"
          placeholder-class="input-placeholder"
          v-model="formData.confirmPassword"
          @input="inputPassword('confirmPassword', $event)"
        />
      </view>
      <view class="item noborder">
        <view class="desc">验证码</view>
        <input type="number" class="input" placeholder="请输入验证码" placeholder-class="input-placeholder" v-model="formData.verificationCode" />
        <view class="code-tip" :class="[timeTip === '获取验证码' ? 'click-color' : '', timeTip === '重新获取验证码' ? 're-click-color' : '']" @click="getCode">{{ timeTip }}</view>
      </view>
    </view>
    <view class="top" v-if="status === 1">
      <view class="item" :class="{ focus: Focus4 }">
        <view class="desc">交易密码</view>
        <input
          type="password"
          @focus="Focus4 = true"
          @blur="Focus4 = false"
          maxlength="6"
          class="input input-password"
          placeholder="请输入交易密码"
          placeholder-class="input-placeholder"
          v-model="formData.password"
          @input="inputPassword('password', $event)"
        />
      </view>
      <view class="item" :class="{ focus: Focus3 }">
        <view class="desc">确认密码</view>
        <input
          type="password"
          @focus="Focus3 = true"
          @blur="Focus3 = false"
          maxlength="6"
          class="input input-password"
          placeholder="请输入确认密码"
          placeholder-class="input-placeholder"
          v-model="formData.confirmPassword"
          @input="inputPassword('confirmPassword', $event)"
        />
      </view>
      <view class="item noborder">
        <view class="desc">验证码</view>
        <input type="number" class="input" placeholder="请输入验证码" placeholder-class="input-placeholder" v-model="formData.verificationCode" />
        <view class="code-tip" :class="[timeTip === '获取验证码' ? 'click-color' : '', timeTip === '重新获取验证码' ? 're-click-color' : '']" @click="getCode">{{ timeTip }}</view>
      </view>
    </view>
    <view class="tip-text" v-if="showTipText">已发送短信验证码到 {{ mobile }}</view>
    <view class="btn" :class="canClick ? '' : 'un'" @click="submit">{{ btnText }}</view>
  </base-page-view>
</template>
<script>
import { mapGetters } from 'vuex'
import { debounce } from '@/utils/tools'
export default {
  components: {},
  data() {
    return {
      formData: {
        password: '',
        confirmPassword: '',
        verificationCode: ''
      },
      //   timeTip: '60s',
      timeTip: '获取验证码',
      btnText: '确认',
      showTipText: false,
      // 设置状态, 0 未设置
      status: 0,
      mobileFocus: false,
      Focus1: false,
      Focus2: false,
      Focus3: false,
      Focus4: false,
      mobile: '',
      setInter: null, // 验证码定时器
      timerSecond: 60,
      publicKey: '' //加密公匙
    }
  },
  computed: {
    canClick() {
      if (this.formData.password && this.formData.password.length === 6 && this.formData.confirmPassword && this.formData.confirmPassword.length === 6 && this.formData.verificationCode) {
        return true
      } else {
        return false
      }
    },
    ...mapGetters(['user'])
  },
  watch: {},
  created() {},
  onLoad(options) {
    this.status = Number(options.status) || 0
    this.$setNavTitle(this.status ? '重置交易密码' : '设置交易密码')
  },
  mounted() {
    
  },
  beforeDestroy() {
    if (this.setInter) {
      clearInterval(this.setInter)
    }
  },
  activated() {},
  methods: {
    // 密码输入，
    inputPassword(prop, e){
      console.log("input输入:", prop, e);
      let val = e.detail.value
      this.$nextTick(()=>{
        this.formData[prop] = this.formData[prop].replace(/[^\d\.]/g,'')
        this.formData[prop] = this.formData[prop].replace(/\./g,'')
      })
    },
    async getCode() {
      if (this.timeTip !== '获取验证码' && this.timeTip !== '重新获取验证码') {
        return
      }
      if (this.loading) {
        return
      }
      this.loading = true
      const res = await this.$api.mineApi.sendVerificationCode()
      if (res.code === 0) {
        this.showTipText = true
        var reg = /^(\d{3})\d{4}(\d{4})$/
        this.mobile = this.user.mobile.replace(reg, '$1****$2')
        this.timeTip = '60s后重新获取'
        this.timerSecond = 60
        this.loading = false
        this.setInter = setInterval(() => {
          this.timerSecond--
          if (this.timerSecond === 0) {
            clearInterval(this.setInter)
            this.timeTip = '重新获取验证码'
            return
          }
          this.timeTip = this.timerSecond + 's后重新获取'
        }, 1000)
      }
    },
    async getPublicKey() {
      let res = await this.$api.mineApi.tradePasswordGetPublicKey()
      if (res.code === 0) {
        this.publicKey = res.data
      }
    },
    async submit() {
      if (!this.canClick) return
      if (this.formData.password.length !== 6) {
        uni.showToast({
          title: '请输入6位交易密码',
          icon: 'none',
          duration: 2 * 1000
        })
        return
      }
      let reg = /^\d{6}$/
      if(!reg.test(this.formData.password)){
        uni.showToast({
          title: '请输入6位数字',
          icon: 'none',
          duration: 2 * 1000
        })
        return
      }
      if (this.formData.password !== this.formData.confirmPassword) {
        uni.showToast({
          title: '交易密码不一致',
          icon: 'none',
          duration: 2 * 1000
        })
        return
      }
      await this.getPublicKey()
      // 加密, 提交
      let jse = new this.$jsEncrypt()
      jse.setPublicKey(this.publicKey)
      let encrypted = jse.encrypt(this.formData.password)
      let params = {
        password: encrypted,
        verificationCode: this.formData.verificationCode
      }
      let res = await this.$api.mineApi.tradePasswordSetUp(params)
      if(res.code === 0){
        uni.showToast({
          icon: 'none',
          title: "设置成功"
        })
        // 更新缓存中密码状态以及store中的状态
        this.$store.dispatch('SET_USER_INFO', {
          trade_password_flag: 1
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 2000);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  background: white;

  .item {
    border-bottom: 1rpx solid #eaeaea;
    margin: 0 32rpx;
    display: flex;
    height: 119rpx;
    line-height: 119rpx;
    font-size: 28rpx;
    font-weight: 500;
    box-sizing: content-box;
    &.focus {
      border-bottom: 1px solid #999;
    }
    &.noborder {
      border: none;
    }
    .desc {
      font-weight: 500;
      width: 150rpx;
    }
    .input {
      width: 280rpx;
      align-self: center;
      font-size: 28rpx;
    }
    .input-password {
      font-size: 40rpx;
      height: 119rpx;
      line-height: 119rpx;
      font-weight: 400;
    }
    /deep/ .input-placeholder {
      color: #cccccc;
      font-size: 28rpx;
      letter-spacing: 0rpx;
      font-weight: 400;
    }
    .code-tip {
      font-size: 28rpx;
      height: 38rpx;
      line-height: 38rpx;
      padding-left: 53rpx;
      border-left: 1px solid #cccccc;
      margin: auto;
      flex: 1;
    }
    .click-color {
      color: black;
      font-size: 26rpx;
    }
    .re-click-color {
      color: #337ef8;
      font-size: 22rpx;
    }
  }
}
.tip-text {
  font-size: 28rpx;
  margin: 40rpx 32rpx;
  color: #999999;
}
.btn {
  position: relative;
  width: calc(100vw - 64rpx);
  color: #fff;
  box-sizing: border-box;
  line-height: 98rpx;
  text-align: center;
  font-size: 28rpx;
  background-color: #f5f5f5;
  margin: 110rpx 32rpx 30rpx;
  background-color: #000;
  height: 88rpx;
  line-height: 88rpx;
  &.un {
    background-color: #ccc;
  }
}
</style>
